<template>
    <!-- 短信登入 -->
     <div class="smsContainer">
                <!-- <h1 class="title" >短信验证码登录</h1> -->
                <el-form-item  label="手机号" >
                    <el-input class="phone captcha" maxlength="11" v-model="phoneNumber" ></el-input>         
                    <span  @click="sendSms" class="captcha-svg" style="color: #888; font-weight:bolder 45px; text-decoration: underline; user-select: none;" v-text="msg"></span>
                </el-form-item>

                <el-form-item  label="验证码" >
                    <el-input class="smsCaptcha"  v-model="code" ></el-input>
                </el-form-item>

                <el-form-item  >
                  <el-button type="primary" @click="submit">提交</el-button>
                </el-form-item>
                
    </div>

</template>

<script>
  import * as api from "@/api/users.js"
    export default{
        // props:['phoneNumber'],
        props:{
          storageUserInfo:{
            type:Function,
            require:true,
          }
        },
        data () {
          return {
              msg:'点击发送验证码',
              flag:true, //一个开关
              phoneNumber:"",
              code:"",//短信验证码
          }
        },
        methods:{
         async sendSms(){
            if (this.flag) {
                this.flag = false;//关掉开关

                //调用接口，获取手机验证码
              let res = await api.getSmsCode(this.phoneNumber)
              console.log(res);
              if (res.data.state) {
                //短信发送成功
                this.$message({
                  type:"success",
                  message:'短信发送成功'
                })
              }else{
                this.$message.error(res.data.msg);
              }
                let delay = 5
                this.msg = `${delay}秒后重新发送`
                this.interval = setInterval(()=>{
                    delay--
                    if (delay < 1) {
                      // console.log(1111);
                    this.msg='点击发送验证码'
                      clearInterval(this.interval)
                      //将开关重新打开
                      this.flag=true
                    }else{
                      this.msg = `${delay}秒后重新发送`
                    }
                  
                },1000)
             }
          },

         async submit(){
            let res = await api.smsLogin(this.code)
            console.log(res);
            //调用父组件的方法，储存用户信息
            this.storageUserInfo(res.data)
            //跳转页面
            this.$router.push('/')
          },
        },
    }
</script>

<style lang="less" scoped>
    .smsContainer{
      position: relative;
      .captcha-svg{
        position: absolute;
        display: block;
        right: 38px;
        top: 0;
        cursor: pointer;
      }
  }
</style>
